<template>
	<view>
		<my-order :date="order.created_at" :img="order.product_pic" :title="order.product_name" :price="order.price"
		 :subTitle="order.merchant?order.merchant.merchant_name:''">
			<template v-slot:mid>
				<textarea class="ipt" v-model="form.content" placeholder="请简单描述您对本次服务的评价~" />
				<view class="item bt">
					<text>匿名此评价</text>
					<u-switch class="pure-switch" v-model="ck" size="40"></u-switch>
				</view>
			</template>
		</my-order>
		
		<view class="rates">
			<view class="rate">
				<view class="margin-lr-xs">服务态度</view>
				<u-rate active-color="#EEBF81" min-count="1" :count="5" v-model="form.score_1"></u-rate>
			</view>
			<view class="rate">
				<view class="margin-lr-xs">预期效果</view>
				<u-rate active-color="#EEBF81" min-count="1" :count="5" v-model="form.score_2"></u-rate>
			</view>
			<view class="rate">
				<view class="margin-lr-xs">满意程度</view>
				<u-rate active-color="#EEBF81" min-count="1" :count="5" v-model="form.score_3"></u-rate>
			</view>
		</view>
		
		<my-btn gold style="margin: 60rpx auto" @click="submit">发布评价</my-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				no: '',
				order: '',
				ck: false,
				form: {
					trade_no: '',
					score_1: 5,
					score_2: 5,
					score_3: 5,
					content: '',
					anonymous: 0
				}
			};
		},
		onLoad(opt) {
			this.form.trade_no = opt.no
			this.no = opt.no
			this.getData();
		},
		watch: {
			ck(val) {
				if (val) {
					this.form.anonymous = 1
				} else {
					this.form.anonymous = 0
				}
			}
		},
		methods: {
			getData() {
				this.$u.get('/order/detail?trade_no=' + this.no).then(res => {
					this.order = res.data.result.order
					if (this.order.status_text != '待评价') {
						this.$msg('当前订单无法评价', 1000, true)
						setTimeout(() => {
							this.$goto('/pages/comment/list', 'redirect')
						}, 1000)
					}
				})
			},
			submit() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				this.$u.post('/comment/submit', this.form).then(res => {
					this.$msg(res.data.msg, 1000, true)
					if (res.data.code==0) {
						setTimeout(() => {
							this.$goto('/pages/comment/list', 'redirect')
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.ipt {
		width: 640rpx;
		height: 240rpx;
		padding: 16rpx;
		background: #F7F5F6;
		border-radius: 8rpx;
		margin: 16rpx auto;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(191,191,191,1);
		line-height:34rpx;
	}
	.rates {
		width: 670rpx;
		border-radius: 8rpx;
		background: #fff;
		margin: 0 auto;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		.rate {
			display: flex;
			align-items: center;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 16rpx;
		}
	}
	.item {
		height: 80rpx;
		display: flex;
		align-items: center;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		&.bt {
			justify-content: space-between;
		}
	}
</style>
